<template>
	<div class="header">
			<div class="nav-topbar">
				<div class="container">
					<div class="topbar-menu">
						<a href="javascript:;">小米商城</a>
						<a href="javascript:;">MUI</a>
						<a href="javascript:;">云服务</a>
						<a href="javascript:;">协议规则</a>
					</div>
					<div class="topbar-user">
						<a href="javascript:;" @click="login" v-if="username!==''">{{username}}</a>
						<a href="javascript:;" @click="login" v-else>{{username}}登录</a>
						<a href="javascript:;" @click="logout" v-if="username!==''">退出</a>
						<a href="/#/order/list" @click="login"  v-if="username!==''">我的订单</a>
						<a href="javascript:;" @click="login" v-if="username==''">注册</a>
						<a href="javascript:;" class="my-cart" @click="goToCart">
							<span class="icon-cart"></span>
							购物车({{cartCount}})
						</a>
					</div>
				</div>
		  </div>
			<div class="nav-header">
				<div class="container">
					<div class="header-logo">
						<a href="/#/index"></a>
					</div>
					<div class="header-menu">
						<div class="item-menu">
							<span>小米手机</span>
							<div class="children">
								<ul>
									<li class="product" v-for="item,index in phoneList">
										<a href="" target="_blank">
											<div class="pro-img">
												<img :src="item.mainImage" alt="">
											</div>
											<div class="pro-name">{{item.name}}</div>
											<div class="pro-price">{{item.price|currency()}}</div>
										</a>
									</li>
									
									
								</ul>
							</div>
						</div>
						<div class="item-menu">
							<span>RedMi红米</span>
							<div class="children"></div>
						</div>
						<div class="item-menu">
							<span>电视</span>
							<div class="children"></div>
						</div>
					</div>
					<div class="header-search">
						<div class="wrapper">
							<input type="text" name="keyword">
							<a href="javascript:;"></a>
						</div>
					</div>
				</div>
			</div>
  </div>
</template>

<script>
	import {mapState} from 'vuex';
	import {Message} from 'element-ui';
	export default {
	  name: "nav-head",
	  data() {
	    return {
	      phoneList: []
	    };
	  },
		
		computed:{
			...mapState(['username','cartCount'])
			// username(){
			// 	return this.$store.state.username
			// },
			// cartCount(){
			// 	return this.$store.state.cartCount
			// }
		},
	  created() {
	  	this.getProductList();
			
			if(this.$route.query.from=='login'){
				this.getCartCount();
			}
	  },
	  mounted() {
	    let params = this.$route.params;
	    if(params && params.from =="login"){
	    }
	  },
	  filters: {
	    currency(val) {
	      if (!val) return "0.00";
	      return "￥" + val.toFixed(2) + "元";
	    }
	  },
	  methods: {
			getCartCount(){
				this.axios.get('/carts/products/sum').then(res=>{
					this.$store.dispatch('saveCartCount',res)
				})
			},
			logout(){
				this.axios.post('/user/logout').then(res=>{
					Message.success('退出成功')
					//让当前的cookie的expires为-1 即立即清空 这个属性的意思式cookie存在的时间
					this.$cookie.set('userId','',{expires:'-1'});
					this.$store.dispatch('saveUserName','')
					this.$store.dispatch('saveCartCount','0')
				})
			},
	    getProductList() {
	      this.axios
	        .get('/products', {
	          params: {
	            categoryId: "100012",
							pageSize:6
	          }
	        })
	        .then(res => {
						console.log(res)
	          this.phoneList=res.list
	        });
	    },
	    goToCart(){
	     this.$router.push({ path: '/cart' })
	    },
	    login(){
	     this.$router.push({ path: '/login' })
	    },
	    },
	  
	};
</script>

<style scoped="scoped" lang="less">
	@import '../assets/css/base.less';
	@import '../assets/css/mixin.less';
	@import '../assets/css/config.less';
	.header{
		.nav-topbar{
			height: 39px;
			line-height: 39px;
			background-color: #333333;
			.container{
			.flex;
			a{
				display: inline-block;
				color: #b0b0b0;
				margin-right: 17px;
			}
			.my-cart{
				width: 110px;
				background-color: #FF6600;
				text-align: center;
				color: #fff;
				.icon-cart{
					.bgImg(16px,12px,'/imgs/icon-cart-checked.png');
					margin: 0 4px;
				}
			}
			}
		}
	  .nav-header{
			border-bottom: 1px solid #E5E5E5;
			.container{
				height: 112px;
				position: relative;
				.flex;
				
			  .header-menu{
					display: inline-block;
					width: 643px;
					padding-left: 100px;
					.item-menu{
						display:inline-block;

						color: #333;
						font-weight: bolder;
						font-size: 16px;
						line-height: 113px;
						margin-right: 30px;
						span{
							cursor:pointer;
						}
						&:hover{
					     color: @colorA;
							 .children{
								 height: 220px;
								 transition:height .5s;
							 }
						}
						.children{
							position: absolute;
							top: 113px;
							left: 0;
							height: 0;
							width: 1226px;
							// border-top: 1px solid #E5E5E5;
							box-shadow: 0 7px 6px 0px rgba(0,0,0,.11);
							z-index: 10;
							background-color: #fff;
							overflow: hidden;
							.product{
								position: relative;
								float: left;
								width: 16.6%;
								height: 220px;
								font-size: 12px;
								line-height: 12px;
								left: 3px;
								text-align: center;
								&::before{
									content: '';
									background-color: #D7D7D7;
									width: 1px;
									height: 100px;
									position: absolute;
									top: 28px;
									right: 0;
								}
								&:last-child::before{
									display: none;
								}
								a{
									display: inline-block;
									text-align: center;
								}
							  img{
									height: 111px;
									width: auto;
									margin-top: 26px;
								}
								.pro-img{
									height: 137px;
									
								}
								.pro-name{
									font-weight: bold;
									margin-top: 19px;
									margin-bottom: 8px;
									color: @colorB;
								}
								.pro-price{
									color:@colorA;
								}
							}
							
						}
					}
				}
			.header-search{
				width: 319px;
				.wrapper{
					height: 50px;
					border: 1px solid #e0e0e0;
					display: flex;
					align-items: center;
					input{
						border: none;
						border-right: 1px solid #e0e0e0;
						width: 264px;
						height: 50px;
						box-sizing: border-box;
						padding-left: 14px;
					}
					a{
						.bgImg(18px,18px,'/imgs/icon-search.png');
						margin-left: 16px;
					}
				}
			}
			}
		}
	}
</style>
